<template>
     <!--
        动态绑定
    动态对class 和Style进行绑定
    class绑定语法：
        :class="{类名:true/false}"
    style绑定语法：
        :style="{样式名：值}"
   -->

   <span >我的第一个动态绑定class</span>
   <p :class="{str_red: flag,back_bg:flag}">动态对class文本颜色修改</p>
   
   <!--当我们使用对象类型的时候 需要去掉{}-->
   <p :class="classObj">class绑定对象类型</p>
   <p :class="{ prices: price > 100 }" >{{ price }}</p>
<!--动态style-->
<hr style="height: 5px;">
    <p :style="{ backgroundColor: bgcolor, fontSize: bgsize }">动态style的样式</p>
</template>

<script setup>

import { ref } from 'vue'
const price=ref(120)
const flag=ref(true)
const bgcolor = ref('red')
const bgsize= ref('20px')
const classObj=ref({

    str_red:true,
    back_bg:true
})

</script>

<style scoped>

*{
    margin: 0;
 
    padding: 0;
   

}
.str_red{
    color: red;
}
.prices{
    color: hotpink;
}
.back_bg{
    background-color: aqua;
}

</style>